<template>
	<div class="box">
		<div v-if="stat" class="fanhui" @click="dianji">
			<span class="iconfont icon-zuojiantou"></span>
		</div>
		<div v-else class="fanhui2" :style="{opacity: num}">
			<span class="iconfont icon-zuojiantou"></span>
			<span>南山滑雪场</span>
			<span></span>
		</div>
		<img src="//img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_600x330_cbd1e1e9.jpg"/>
		<div class="bottominfor">
			<p>南山滑雪场</p >
			<p>
				<span class="iconfont icon-tupian"></span>
				<span>39</span>
			</p >
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				stat:true,
				num:0
			}
		},
		methods:{
			handleScroll(){
				//兼容
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop
				console.log(scrollTop)
				if(scrollTop>2){
					this.stat = false
				}else{
					this.stat = true
				}
				this.num = 1/206*scrollTop
				this.num = this.num.toFixed(2)
			},
			dianji(){
				this.$router.push('/')
			}
		},
		mounted(){
//			滚动高度
			window.addEventListener('scroll',this.handleScroll)
		}
	}
</script>
<style scoped>
	.box{
		width: 100%;
		height: 2.06rem;
		position: relative;
	}
	.box img{
		width: 100%;
		height: 2.06rem;
	}
	.fanhui{
		width: .36rem;
		height: .36rem;
		border-radius: 50%;
		background: rgba(0,0,0,.7);
		text-align: center;
		line-height: .36rem;
		color: white;
		font-weight: 900;
		position: absolute;
		top: .05rem;
		left: .05rem;
	}
	.bottominfor{
		width: 100%;
		height: .3rem;
		font-size: .2rem;
		color: white;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7));
	}
	.fanhui2{
		width: 100%;
		height: .44rem;
		background: #00BCD4;
		display: flex;
		line-height: .44rem;
		position: fixed;
		top: 0;
		left: 0;
	}
	.fanhui2>span{
		flex: 1;
	}
	.fanhui2>span:nth-child(1){
		font-size: .16rem;
		color: white;
		padding-left: .05rem;
		font-weight: 900;
	}
	.fanhui2>span:nth-child(2){
		text-align: center;
		font-size: .16rem;
		color: white;
	}
</style>